<template>
   
    <el-scrollbar :always="always">
        
      <div class="scrollbar-flex-content">
        <div v-for="item,index in list" :key="index" style="padding: 20px;" @click="openDetail(item)">
            <img :src="item.image" class="Guid-image"/>
            <p class="title">{{item.title}}</p>
            <el-rate
              v-model="item.score"
              disabled
              show-score
              text-color="#ff9900"
              score-template=""
            />
            <p class="tips">{{item.days}} days {{item.nights}} nights , {{item.places}} places to visit </p>
        
        </div>
      </div>
      <div v-if="list.length==0" class="noneList">
        NO Plan
      </div>
    </el-scrollbar>
  </template>
  <script setup>
    import { ref, watch, onMounted } from 'vue';
    import { getGuid } from '@/api/index';
    import { useRouter, useRoute } from 'vue-router';
    const route = useRoute();
    const routers =useRouter();
    const always = ref(true)
    // 接收父组件传递的查询参数
    const props = defineProps({
      queryParam: {
        type: Object,
        required: true
      }
    });
    
    // 响应式变量
    const list = ref([]);
    
    // 获取数据列表
    function getList() {
  
 
      // if(props.queryParam.categories && props.queryParam.categories.length>0){
      //   props.queryParam.categorieList = props.queryParam.categories.join(",")
      //   props.queryParam.categories = null
      // }
      const query = {
        page : props.queryParam.page,
        size : props.queryParam.size,
        categorieList : (props.queryParam.categories && props.queryParam.categories.length>0)?props.queryParam.categories.join(","):null,
        where : props.queryParam.where?props.queryParam.where:"",
        region : props.queryParam.region?props.queryParam.region:"",
        title : props.queryParam.title?props.queryParam.title:"",
      }
      
      getGuid(query).then(res => {
        // console.log(res);
        list.value = res.content;  // 使用 list.value 来更新 list
      }).catch(error => {
        console.error('Failed to fetch data:', error);
      });
    }
    
    // 观察 queryParam 的变化并重新获取数据
    watch(() => props.queryParam, () => {
      getList();
    }, { deep: true });
    
    // 组件挂载后获取数据
    onMounted(() => {
      getList();
    });

    function openDetail(item) {
      cache.session.setJSON('prePath',route.path)
      routers.push({
					path:'/stepTwo',
					query:{
            id:item.id
          }
				})
    }
    </script>
  <style scoped>
  .scrollbar-flex-content {
    display: flex;

  }
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
  }
  .Guid-image{
    width: 250px;
    height: 160px;
    border-radius: 10px;
  }
  .title{
    font-weight: 500;
    font-size: x-large;
    color: #000;
    margin-bottom: 0;
    text-overflow: ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/ 
    white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */ 
    overflow: hidden; /*超出部分隐藏*/
  }
  .tips{
    font-weight: 400;
font-size: 18.0439px;
line-height: 21px;
color: #5a5a5a;
  }
  .noneList{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 150px;
    line-height: 100px;
    padding: 20px;
    margin-right: 10px;
    border-radius: 20px;
    background-color: #fafafa;
  }
  </style>
  